<template>
	<div v-if="shoppingSelectGoods != null">
		<div v-for="(item,index) in shoppingSelectGoods.goods_list">
			<div class='order-place' :key="index">
				<img class='goods-thumb' :src='item.goods_image' />
				<div class='goods-title-content'>
					<span class='goods-title'>{{item.goods_name}}</span>
					<span class='goods-class'>{{item.spec_name}}</span>
				</div>
				<div class='flex-grow'></div>
				<div class='goods-prices' decode="true" v-if="item.goods_num">¥{{item.goods_price}}x {{item.goods_num}}</div>
				<div class='goods-prices' decode="true" v-if="item.num">¥{{item.goods_price}}x {{item.num}}</div>

			</div>
			<!--月定制 月份的列表  -->
			<div class='order-place-colum' v-if="shoppingSelectGoods.order_label == 1">
				<div class='month-item' v-for="(monthItem,index) in item.monthlist">
					<span class='sub-month-info'>{{monthItem.year}}年{{monthItem.month}}月</span>
					<span class='sub-month-info'>￥{{item.goods_price}} x {{monthItem.count}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters, mapState } from 'vuex';
	export default {
		data() {
			return {

			}
		},
		computed: {
			...mapState(['shoppingSelectGoods'])
		}
	}
</script>

<style lang="scss" scoped>
	.order-place {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40px 0;
		border-bottom: 1px solid #dcdcdc;
		.goods-thumb {
			flex-shrink: 0;
			width: 120px;
			height: 100px;
			border-radius: 10px;
			margin-right: 20px;
		}
		.goods-title-content {
			width: 380px;
			padding-right: 20px;
			.goods-title {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: block;
				width: 100%;
				height: 40px;
				margin-bottom: 20px;
				color: #67666b;
				font-size: 28px;
				line-height: 40px;
			}
			.goods-class {
				display: block;
				height: 40px;
				color: #9b9b9b;
				font-size: 28px;
				line-height: 40px;
			}
		}
		.flex-grow {
			height: 1px;
			flex-grow: 2;
		}
		.goods-prices {
			flex-shrink: 0;
			font-size: 30px;
			color: #67666b;
		}
	}
	
	.order-place-colum {
		display: flex;
		flex-direction: column;
		padding: 30px 0;
		border-bottom: 1px solid #dcdcdc;
		.month-item {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 70px;
			padding-left: 50px;
			.sub-month-info {
				color: #67666b;
				font-size: 28px;
			}
		}
		.month-item::after {
			position: absolute;
			top: 28px;
			left: 0;
			width: 10px;
			height: 10px;
			border: 2px solid #979797;
			border-radius: 50%;
			content: "";
		}
	}
</style>